import React, { Component } from 'react';

import { Card, Button, notification } from 'antd';
import './style.less';

export default class OpenNotification extends Component{

	openNotification = (type, direction) => {
		if(direction){
			notification.config({
				placement: direction
			})
		}
		notification[type]({
			message: '重大消息提醒',
			description: '中奖啦，中大奖啦！'
		})
	}

	render() {
		return(
			<div>
				<Card title="通知提醒框">
					<Button type="primary" onClick={() => this.openNotification('success')}>success</Button>
					<Button type="primary" onClick={() => this.openNotification('info')}>info</Button>
					<Button type="primary" onClick={() => this.openNotification('warning')}>warning</Button>
					<Button type="primary" onClick={() => this.openNotification('error')}>error</Button>
				</Card>
				<Card title="通知提醒框">
					<Button type="primary" onClick={() => this.openNotification('success', 'topLeft')}>success</Button>
					<Button type="primary" onClick={() => this.openNotification('info', 'topRight')}>info</Button>
					<Button type="primary" onClick={() => this.openNotification('warning', 'bottomLeft')}>warning</Button>
					<Button type="primary" onClick={() => this.openNotification('error', 'bottomRight')}>error</Button>
				</Card>
			</div>
		);
	}

}